.@{halo}container {
  width: 96%;
  margin: 0 auto;
} 
.@{halo}row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  &.reverse {
    flex-direction: row-reverse;
  }
}
.@{halo}col {
  flex: 1;
  box-sizing: border-box;
}

[class*=" halo-col-"],
[class^='halo-col-'] {
  width: 100%;
  box-sizing: border-box;
}

.make-col-loop(@type: '', @i: 1, @n:12) when (@i <= @n){
  @col-name: ~"@{halo}col@{type}";
  .@{col-name}-@{i}{
    flex: 0 0 @i/@n*100%;
  }
  .make-col-loop(@type, (@i + 1), @n);
}

.make-col-loop();

@media screen and (max-width: @sm - 0.2) {
  .make-col-loop('-xs');
}

@media screen and (min-width: @sm) {
  .make-col-loop('-sm');
}

@media screen and (min-width: @md) {
  .make-col-loop('-md');
}

@media screen and (min-width: @lg) {
  .make-col-loop('-lg');
}
